Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 435 | Author: cody 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <link rel="shortcut icon" href="logo.png" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="prism.css">
    <link rel="stylesheet" href="style.css">
    <title>PostMan Clone</title>
</head>


<body>
    <!-- nav bar -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="index.html">GET-POST REQUEST</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                    <a class="nav-link" href="https://github.com/singhkunal01">Contact Me</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- alert if the url is empty -->
    <div id="failure-alert" class="url-alert alert alert-danger alert-dismissible shake show" role="alert">
        <strong>Hey User !! </strong>Please Make sure you have filled the Type or Paste The URL (It should'nt be Empty).
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <!-- main heading -->
    <div class="container">
        <h2 class="my-3" id="heading">Get/Post Your Request  </h2>
    </div>
    <!-- main container for all functions (selection ,getting ,posting etc,.) -->
    <div class="container">
        <!-- url pasting section -->
        <div class="form-group row">
            <label for="url" class="col-sm-2 col-form-label">Enter Your URL</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="url" placeholder="Type or Paste The URL" />
            </div>
        </div>
        <!-- radio button for selction of getting or posting requestType -->
        <fieldset class="form-group my-4">
            <div class="row">
                <legend class="col-form-label col-sm-2 pt-0">Request Type</legend>
                <div class="col-sm-10">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="requestType" id="getRequest" value="GET" checked />
                        <label class="form-check-label" for="getRequest"> GET </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="requestType" id="postRequest" value="POST" />
                        <label class="form-check-label" for="postRequest"> POST </label>
                    </div>
                </div>
            </div>
        </fieldset>
        <!-- main content type box for json and selection of custom parameters -->
        <fieldset class="form-group my-4">
            <div class="row">
                <legend class="col-form-label col-sm-2 pt-0">Content Type</legend>
                <div class="col-sm-10">
                    <div class="form-check">
                        <label class="form-check-label" for="jsonRadio"> JSON </label>
                        <input class="form-check-input" type="radio" name="contentType" id="jsonRadio" value="json" checked />
                    </div>
                    <div class="form-check">
                        <label class="form-check-label" for="customRadio">
              Custom Parameters
            </label>
                        <input class="form-check-input" type="radio" name="contentType" id="customRadio" value="custom" />
                    </div>
                </div>
            </div>
        </fieldset>
        <!-- this is section where if the user choose Custom Parameters then this section will appear otherwise it will be hidden -->
        <div id="parameter-box">
            <div class="form-group row">
                <label for="paramKey" class="col-sm-2 col-form-label">Parameter 1</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="paramKey1" placeholder="Key Of Parameter 1" />
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="paramValue1" placeholder="Value Of Parameter 1" />
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary" id="addBtn">Add </button>
                </div>
            </div>
        </div>
        <div id="addMoreParameters"></div>
        <!-- if the user clicks on json then this option will shown to the user instead of custom parameters; -->
        <div class="my-3" id="requestJsonBox">
            <div class="form-group row">
                <label for="json-box" class="col-sm-2 col-form-label">Enter JSON</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="json-box" rows="3" placeholder="Enter /Paste Your JSON"></textarea>
                </div>
            </div>
        </div>
        <!-- submit button to fetch the data -->
        <div class="form-group row">
            <div class="col-sm-10">
                <button class="btn btn-primary" id="submit-btn">Submit</button>
            </div>
        </div>
        <!-- section where we got the response after fetching the result -->
        <div class="my-3" id="responseJsonBox">
            <div class="form-group row">
                <label for="response-box" class="col-sm-2 col-form-label">Response</label>
                <div class="col-sm-10">
                    <!--           <textarea class="form-control" id="response-box" rows="3">
Your Response Is Displayed Here....</textarea> -->
                    <pre id="prismPre" class="language-javascript">
  <code id="response-box" class="language-javascript">
    Hey User, Please Wait a Minute We are fetching the Required Results.This May Take some Time !!
  </code></pre>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <p>&lt; / &gt; with ❤️ by
            <a href="https://github.com/singhkunal01">Kunal Singh</a>
            </a>
        </p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    <script src="Postman clone.js"></script>
    <script src="prism.js"></script>
</body>

</html>

Share this file: